<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="uft-8">
  	<title>Js留言板练习</title>
  	<style type="text/css">
  		*{
  			margin: 0;
  			padding: 0;
  			background-color: black;
  			font-size: 50px;
  			color: white;
  		}
  		div{
  			margin:100px auto;
  			margin-left: 200px;
  		}
  		div p{
  			margin-left: 150px;
  		}
  	</style>
</head>
<body>
	<div>
		<p>网页JS练习 现在几时几分几秒</p>
		<div class="tupian">
			<img src="0.png">
			<img src="0.png">
			:
			<img src="0.png">
			<img src="0.png">
			:
			<img src="0.png">
			<img src="0.png">
		</div>
	</div>
	<script type="text/javascript">
		//给获取的时间添加两位数
		function toDoub(n){
			if(n<10){
				return '0'+n;
			}
			else{
				return ''+n;
			}
		};
		//获取图片
		var aImg=document.getElementsByTagName('img');
		//添加定时器
		function time(){
			var oDate=new Date();
			var str=toDoub(oDate.getHours())+toDoub(oDate.getMinutes())+toDoub(oDate.getSeconds())
			for(var i=0;i<aImg.length;i++)
			{
				aImg[i].src=str.charAt(i)+'.png';
			}
		}
		setInterval(time,1000);
		time();
  	</script>
</body>
</html>